<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同需求</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/easyui/themes/icon.css">
    <script type="text/javascript" src="/css/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/css/easyui/jquery.easyui.min.js"></script>
</head>

<body>
    <div id="app">
        <!--导航切换-->
        <div class=".p-30" style="padding:25px 0">
            <div style="width:100%;display:flex;justify-content:space-between">
                <div style="width:15.5%">
                    <div
                        style="width:230px;height:30px;line-height:30px;background-color:#f4f4f4;position:fixed;top:0;z-index:999;font-size:14px;color:#575765;font-weight: bold;padding-left:10px">
                        社区列表</div>
                    <!-- <div class="grid-content bg-purple-light"> -->
                    <!-- <el-form  :model="check"  ref="verification">
                        <el-row type='flex'>
                          <el-form-item prop="name">
                          <el-input v-model="check.name" placeholder="请输入社区名称" ></el-input>  
                          </el-form-item>
                          <el-form-item label-width="10px">
                          <el-button type="primary" @click="retrieval">搜&ensp;&ensp;索</el-button> 
                          </el-form-item>
                        </el-row>
                     </el-form> -->
                    <!-- //折叠面板 -->
                    <!-- <el-collapse accordion style="width:300px" v-model="activeName">
                      <el-collapse-item name="1">
                        <template slot="title">
                          北宅街道<i class="header-icon el-icon-info"></i>
                        </template>
                      <el-tree :data="community" :props="defaultProps" >
                      </el-tree>
                      </el-collapse-item>
                     </el-collapse> -->
                    <div>
                        <div style="position:fixed;">
                            <ul class="easyui-datalist" title="地区" style="width:230px;height:800px">
                                <div>
                                    <ul class="easyui-tree" id="tt" ref="tree"></ul>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- //右半部分 -->
                <div style="width:82.5%">
                    <div>
                        <div
                            style="width:85%;height:30px;line-height:30px;background-color:#f4f4f4;position:fixed;top:0;z-index:999;font-size:14px;color:#575765;font-weight: bold;">
                            查询结果</div>
                        <div class="main">
                            <el-form :model="address" ref="verification" label-width="10px">
                                <el-row type='flex'>
                                    <el-form-item prop="name" label-width="0px">
                                        <el-input v-model="address.name" placeholder="请输入单位名称/门牌号" style="width:190px">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="start_time">
                                        <el-date-picker style="width:190px" v-model="address.start_time" type="date"
                                            placeholder="开始时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item prop="ent_time">
                                        <el-date-picker style="width:190px" v-model="address.ent_time" type="date"
                                            placeholder="结束时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="meeting">搜&ensp;&ensp;索</el-button>
                                        <el-button @click="resetForm('verification')">重&ensp;&ensp;置</el-button>
                                        <el-button type="primary" @click="download">导&ensp;&ensp;出</el-button>
                                    </el-form-item>
                                </el-row>
                            </el-form>
                            <el-table :data="tableData" border='' style="width:100%" type="flex" justify="center"
                                v-loading="loading">
                                <el-table-column label="序&ensp;&ensp;号" width="120" type="index" align='center'>
                                </el-table-column>
                                <el-table-column label="名&ensp;&ensp;称" width='' align='center' prop="comName"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="社&ensp;&ensp;区" width="" align='center' prop="place_5.name"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="地&ensp;&ensp;址" width="" align='center' prop="address"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="视频/照片" width="" align='center' prop="meet.url">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.meet.length">
                                            <template v-for="(item,i) in scope.row['meet']">
                                                <img :src="item.url"
                                                    style="width:50px;height:50px;line-height:30px;margin:10px auto" />
                                                <el-divider v-if="i == scope.row['meet'].length - 1 ? false : true"
                                                    style="margin:100px 0"></el-divider>
                                            </template>
                                        </template>
                                    </template>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备&ensp;&ensp;注" width="" align='center' prop="meet.remarks">
                                    <template slot-scope={row}>
                                        <template v-if="row.meet.length">
                                            <template v-for="(item,i) in row['meet']">
                                                <span v-text="item.remarks"></span>
                                                <span v-if="item.remarks !== null" v-text="item.remarks"></span>
                                                <span v-if="item.remarks == null" v-text="have"></span>
                                                <el-divider v-if="i == row['meet'].length - 1 ? false : true"
                                                    style="margin:100px 0"></el-divider>
                                            </template>
                                        </template>
                                    </template>
                                    </template>
                                </el-table-column>
                                <el-table-column label="提交时间" width="180" align='center' prop="meet.created_at">
                                    <template slot-scope={row}>
                                        <template v-if="row.meet.length">
                                            <template v-for="(item,i) in row['meet']">
                                                <span v-text="item.created_at"></span>
                                                <el-divider v-if="i == row['meet'].length - 1 ? false : true">
                                                </el-divider>
                                            </template>
                                        </template>
                                    </template>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操&ensp;&ensp;作" width="180" align='center' fixed="right">
                                    <template slot-scope={row}>
                                        <template v-if="row.meet.length">
                                            <template v-for="(item,i) in row['meet']">
                                                <el-button type="warning" @click="Inventory(item)" size="mini">
                                                    详&ensp;&ensp;情
                                                </el-button>
                                                <el-button type="danger" @click="deleteRow(item)" size="mini">
                                                    历史记录
                                                </el-button>
                                                <el-divider v-if="i == row['meet'].length - 1 ? false : true">
                                                </el-divider>
                                            </template>
                                        </template>
                                    </template>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页组件 -->
                            <div class="block" style="margin-top:15px;">
                                <el-pagination align='center' @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange" :current-page="currentPage"
                                    :page-sizes="[10,20,50,100]" :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="count">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 弹窗 -->
                <el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%" :before-close="handleClosee">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">
                        <el-card class="box-card">
                            <div class="trstyle">
                                <p><b>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
                                    <span>@{{corporate_name.comName}}</span>
                                </p>
                                <p><b>经营地址：</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>@{{corporate_name.address}}</span>
                                </p>
                                <!-- <p><b>经营地址：</b>&nbsp;&nbsp;&nbsp;&nbsp; <span  v-text="listone.users"></p> -->
                                <p><b>法定代表人：</b> &nbsp;&nbsp;<span></span></p>
                                <p><b>联系电话：&nbsp;&nbsp;&nbsp;&nbsp;</b> <span></span></p>
                                <p><b>备注/晨会内容:</b><span>@{{listone.remarks}}</span></p>
                                <p><b>提&nbsp;交&nbsp;人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
                                    <span>@{{users.name}}</span>
                                </p>
                                <p><b>提交时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b> <span>@{{listone.created_at}}</span></p>
                                <!-- <p class="url_img"><b>视频/照片：&nbsp;&nbsp;</b> <span><img :src="listone.url"></span></p>  -->
                                <p class="url_img"><b>照片/视频:</b> <span>
                                        <el-image class="image" :src="listone.url" :preview-src-list="[listone.url]">
                                        </el-image>
                                        <video :src="listone.video" controls="controls"
                                            :style="{ display: listone.video == null?'none':'' }">
                                        </video>
                                    </span></p>
                            </div>
                        </el-card>
                    </table>
                </el-dialog>
            </div>
        </div>
    </div>
    <script src="/css/exam/js/vue.js"></script>
    <script src="/css/elementui/index.js"></script>
    <script src="/css/exam/js/axios.min.js"></script>
    <script>
    community = [];
    const app = new Vue({
        el: '#app',
        data() {
            return {
                have: '无',
                loading: false,
                title: '详情',
                dialogFormVisible: false,
                tableData: [],
                corporate_name: [],
                users: [],
                loading: false,
                listone: [], //弹窗数据
                check: {
                    name: '',
                },
                address: {
                    name: '',
                    start_time: '',
                    ent_time: ''
                },
                currentPage: 1, // 当前页码
                count: 30, // 总条数
                pageSize: 10, // 每页的数据条数
                community: [], //节点数据
                defaultProps: {
                    label: 'name'
                },
                currentPage: 1, // 当前页码
                count: 30, // 总条数
                pageSize: 10, // 每页的数据条数
                activeName: '1'
            }
        },
        created() {
            this.meeting()
            this.retrieval()
        },
        methods: {
            //检索
            async retrieval() {
                let res = await axios.post('/admin/meet/comlist_pro', {
                    name: this.check.name
                })
                this.community = res.data.data.street
                console.log(this, "this");
                this.community.forEach(item => {
                    item.text = item.name
                    //子集children
                    item.children = [{
                        text: item.name,
                        id: item.id,
                    }]
                    item.state = "closed"
                })
                console.log("this.community", this.community);
                this.showTree(this.community)
                //关闭所有
            },
            showTree(nodeChildren) {
                $('#tt').tree({
                    data: [{
                        "id": 1,
                        "text": "北宅街道",
                        "children": nodeChildren,
                    }],
                    onExpand: (node) => {
                        this.community.forEach(item => {
                            if (node.pid && node.name == item.name) {
                                this.$delete(item, "children")
                                this.$delete(item, "state")
                                this.showTree(this.community)
                            }
                        })
                    },
                    onClick: async (node) => {
                        let param = {
                            community: node.id,
                            start_created_at: this.address.start_time,
                            end_created_at: this.address.ent_time,
                        }
                        this.loading = true
                        let res = await axios.post('/admin/meet/comlistdata', param)
                        this.tableData = res.data.data.list
                        this.count = res.data.data.count
                        this.loading = false
                    }
                })
            },
            // 显示列表
            async meeting() {
                this.loading = true
                let param = {
                    comname: this.address.name,
                    start_created_at: this.address.start_time,
                    end_created_at: this.address.ent_time,
                    page: this.currentPage,
                    limit: this.pageSize
                }
                let res = await axios.post('/admin/meet/comlistdata', param)
                this.tableData = res.data.data.list
                this.count = res.data.data.count
                this.loading = false
            },
            //跳到历史记录页面
            deleteRow(row) {

                window.location.href = `/admin/examview/history?id=${row.company_id}`

            },
            //详情页
            async Inventory(rows) {
                console.log(rows);
                this.dialogFormVisible = true
                let res = await axios.post('/admin/meet/referweb', {
                    id: rows.id
                })
                console.log('res', res.data.code);
                if (res.data.code == 408) {
                    this.$message('该晨会、早课不存在')
                    return
                }
                this.listone = res.data.data
                this.corporate_name = res.data.data.company
                this.users = res.data.data.users

            },
            //关闭弹窗
            handleClosee() {
                console.log(123);
                this.dialogFormVisible = false
                this.corporate_name.comName = ''
                this.corporate_name.address = ''
                this.listone.remarks = ''
                this.users.name = ''
                this.listone.created_at = ''
                this.listone.url = ''
                this.listone.video = ''
            },
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.address.start_time = ''
                this.address.ent_time = ''
                this.meeting()
            },

            // 分页页码  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.search_for()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.search_for()
            },
            //导出
            download() {
                axios.post('/admin/meet/comexportone', {
                        comname: this.address.name,
                        start_created_at: this.address.start_time,
                        end_created_at: this.address.ent_time,
                        page: this.currentPage,
                        limit: this.pageSize
                    })
                    .then((res) => {
                        let url = res.data.url
                        let file_name = res.data.file_name
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.setAttribute = file_name;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link)
                    })
                    .catch((err) => {
                        console.log(err);
                    })
            },
            // 分页页码  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.meeting()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.meeting()
            },
        },
    })
    </script>
    <style scoped>
    .el-table .el-table__cell:first-child {
        text-align: center;
    }
    .el-divider {
        margin: 0;
    }
    #app {
        padding: 0;
    }
    .p-30 {
        margin: 0px 30px;
    }
    .trstyle b {
        margin: 20px 50px;
    }
    .trstyle p {
        flex: 1;
    }
    .trstyle span {
        display: inline-block;
        width: auto;
        text-align: left;
    }
    .url_img {
        display: inline
    }
    .url_img img {
        vertical-align: middle;
        width: 150px;
        height: 150px
    }
    .image {
        vertical-align: middle !important;
        width: 150px;
        height: 150px
    }
    .url_img video {
        vertical-align: middle;
        width: 150px;
        height: 150px;
        margin: 20px;
    }
    .el-form-item {
        margin-bottom: 0;
    }
    .el-row {
        margin: 10px 10px 10px 0px;
    }
    .datagrid-body {
        height: 620px !important;
    }
    </style>
</body>

</html>